<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content teacher_leave">
      <e-heading grade='1'>教练请假</e-heading>

      <div  v-loading="loading">
        <el-row>
          <el-col :span="3">
            <div class="grid-content label-right">
              请假人：
            </div>
          </el-col>
          <el-col :span="21">
            <el-select v-model="coachId" class="leave-control" size="small" filterable clearable>
              <el-option v-for="item in train_teacher_list" 
                :key="item.id"
                :value="item.id"
                :label="item.teacherName">
              </el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row class="middle-row">
          <el-col :span="3" class="time-range">
            <div class="grid-content label-right">请假时间：</div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content">
              <el-date-picker size="small" class="leave-control" v-model="date" type="daterange" placeholder="选择请假时间" 
              :picker-options="pickerOptions" @change="handleDate" />
              <span class="remind">注：可请未来7天的假</span>
            </div>
          </el-col>
        </el-row>

        <el-row class="leave-zone">
          <el-col :span="3" v-if="courseTime">
            <div class="grid-content label-right">
              请假课程：
            </div>
          </el-col>
          <el-col :span="21">
            <div class="grid-content bg-purple-light">
              <div class="course" v-if="isCourse&&courseTime">
                <el-scrollbar class="import_table" wrap-class="vacade-scroll">
                  <template v-for="(item, index) in train_coach_course_time">
                    <el-checkbox 
                      :label="item.id" 
                      :key="index" 
                      v-model="objectSelect[index].checked">
                      {{`${item.courseName} ${new Date(item.beginDate).format('yyyy-MM-dd')}`}} {{item.weekcode | getWeekDay}} {{new Date(item.startTime).format('hh:mm')}}-{{new Date(item.endTime).format('hh:mm')}}
                    </el-checkbox>
                    <div v-if="objectSelect[index].checked" :key="item.id" class="selected_teacher">
                      代课教练：
                      <el-select v-model="objectSelect[index].options[0].selectedCoachId" placeholder="请选择代课教练">
                        <el-option
                          v-for="(item, index) in train_teacher_list"
                          :key="index"
                          :value="item.id"
                          :label="item.teacherName">
                        </el-option>
                      </el-select>
                    </div>
                  </template>
                </el-scrollbar>
              </div>
              <div v-if="!isCourse&&courseTime" style="line-height:36px;">
                暂无可请假的课程
              </div>
            </div>
          </el-col>
        </el-row>

      </div>
      
      <div class="btn-groups center" >
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :disabled="!selectedDate || !objectSelect.some(item => item.checked)">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import trainApi from 'api/train'

export default {
  data () {
    return {
      loading: false,
      coachId: '',
      date: '',
      objectSelect: [],
      courseTime: false,
      isCourse: false,
      selectedDate: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 24 * 60 * 60 * 1000 * 7
        }
      }
    }
  },
  created () {
    window.tyler = this
    this.$store.dispatch('train_teacher_list')
  },
  computed: {
    ...mapGetters({
      train_coach_course_time: 'train_coach_course_time',
      train_coach_leave_time: 'train_coach_leave_time',
      train_teacher_list: 'train_teacher_list'
    })
  },
  watch: {
    coachId (val) {
      if (val && this.selectedDate && this.date.length) {
        this.$store.dispatch('train_coach_course_time', {
          teacherId: this.coachId,
          beginDate: +new Date(this.date[0]),
          endDate: +new Date(this.date[1])
        })
      }
    },
    train_coach_course_time (value) {
      if (value.length === 0) {
        this.courseTime = true
        this.isCourse = false
      } else {
        this.courseTime = true
        this.isCourse = true
      }
      let that = this
      this.objectSelect = value.map(item => {
        return {
          checked: false,
          id: item.id,
          beginDate: item.beginDate,
          courseCycleId: item.courseCycleId,
          options: [
            {
              checked: '2',
              coachList: that.train_teacher_list,
              selectedCoachId: ''
            }
          ]
        }
      })
    }
  },
  methods: {
    handleChange ($event, index, options) {
      options.forEach((item) => {
        item.checked = ''
      })
      options[index].checked = $event
    },
    handleDate (value) {
      if (!value) { // 时间不存在
        this.courseTime = false
        this.isCourse = false
      } else {
        this.selectedDate = true
        this.$store.dispatch('train_coach_course_time', {
          teacherId: this.coachId,
          beginDate: new Date(this.date[0]).getTime(),
          endDate: new Date(this.date[1]).getTime()
        })
      }
    },
    handleCancel () {
      this.$set(this, 'coachId', '')
      this.$set(this, 'date', '')
      this.objectSelect = []
      this.courseTime = false
      this.$forceUpdate()
    },
    handleSubmit () {
      let vacateListData = this.objectSelect.map((item, index) => {
        return {
          id: item.id,
          beginDate: item.beginDate,
          courseCycleId: item.courseCycleId,
          replaceTeacherId: item.checked ? item.options[0].checked === '2' ? item.options[0].selectedCoachId : '' : '',
          scheduleType: item.checked ? item.options[0].checked === '2' ? '2' : '' : ''
        }
      })
      let dataList = vacateListData.filter(item => {
        return item.scheduleType
      })
      this.loading = true
      trainApi.coachVacate(JSON.stringify(dataList), {context: this, successMsg: '请假成功'}).then(res => {
        this.handleCancel()
        setTimeout(() => {
          this.loading = false
        }, 500)
      })
    }
  }
}
</script>

<style lang="scss">
  .teacher_leave {
    .middle-row{
      margin: 20px 0;
    }
    .label-right{
      text-align: right;
      line-height: 36px;
      padding-right:20px;
    }
    .leave-control{
      width:310px!important;
    }
    .time-range {
      line-height: 36px;
    }
    .leave-zone{
      .el-checkbox{
        line-height:36px;
      }
    }
    .btn-groups{
      margin-top: 20px;
    }
    .selected_teacher {
      padding-left: 30px;
    }
    .remind {
      color: #FF9900;
      font-size: 12px;
      padding-left: 5px;
    }
  }
</style>
